<template>
	<view class="login-wrap">
		<!-- <comp-navbar title="Login" :placeholder="true"></comp-navbar> -->

		<view class="content-wrap">
			<view class="title">数智礼仪平台</view>
			<view class="input-item">
				<view class="label">
					登录名
				</view>
				<up-input class="inputBox" :border="'none'" placeholder="请输入用户名" fontSize="20px" color="#fff"
					v-model="username">
				</up-input>
			</view>
			<view class="input-item">
				<view class="label">
					密码
				</view>
				<up-input type="password" class="inputBox" :border="'none'" fontSize="20px" placeholder="请输入密码"
					color="#fff" v-model="psd">
				</up-input>
			</view>

			<view class="regto" @click="handleLogin">登录</view>
			<!-- <view class="LoginTo">
				<view>
					Ainda não tem conta? Criar <text>uma</text>
				</view>
			</view> -->

		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	import {
		useUserStore
	} from '@/stores/user.js'

	const userConfig = useUserStore()
	const path = ref('')

	const username = ref(''); // sz666
	const psd = ref(''); // 123456

	// const username = ref('');
	// const psd = ref('');
	const tabpage = ['/pages/index/home', '/pages/yishi/yishi', '/pages/my/my']
	const handleLogin = async () => {
		if (!username.value.trim()) {
			uni.showToast({
				icon: 'none',
				title: '用户名不能为空'
			})
			return
		}
		if (!psd.value.trim()) {
			uni.showToast({
				icon: 'none',
				title: '密码不能为空'
			})
			return
		}
		const data = {
			username: username.value,
			password: psd.value
		}
		await userConfig.login(data)
		if (path.value) {
			const tabflag = tabpage.some(v => v.includes(path.value))
			if (tabflag) {
				uni.switchTab({
					url: path.value
				})
			} else {
				uni.redirectTo({
					url: path.value
				})
			}
			return;
		}
		uni.switchTab({
			url: '/pages/index/home'
		})

	}

	const handleClose = () => {
		uni.navigateBack()
	}
	onLoad((opt) => {
		console.log('login-onLoad..', opt)
		if (opt.path) {
			path.value = opt.path
		}
	})
</script>

<style lang="scss" scoped>
	.login-wrap {
		height: 100vh;
		font-size: 30rpx;
		color: #fff;
		background: #59c6f0;

		.content-wrap {
			width: auto;
			padding: 20rpx;
		}

		.title {
			text-align: center;
			padding: 60rpx 0;
			font-size: 40rpx;
			font-weight: bold;
			font-style: italic;
			color: #fff;
		}

		.input-item {
			margin-top: 40rpx;
		}

		.inputBox {
			height: 88rpx;
			border-bottom: 1rpx solid #fff;
			border-radius: 0;
		}

		.regto {
			width: 100%;
			margin-top: 90rpx;
			height: 70rpx;
			color: $act-color;
			background-color: #fff;
			border-radius: 20rpx;
			display: flex;
			font-size: 28rpx;
			justify-content: center;
			align-items: center;
		}
	}
</style>